<template>
  <ContainerGroup>
    <Container>
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        :button-list="buttonList"
      />
      <!-- <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
      <el-button icon="el-icon-refresh-left" size="mini">重置</el-button> -->
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <Table
        :columns="tableColumns"
        :data="tableData"
        :loading="tableLoading"
        :pagination="{
          total: total,
          current: pageNum,
          pageSize: pageSize,
        }"
        @paginationChange="pageChange"
      />
    </Container>
  </ContainerGroup>
</template>

<script>
import { selectList } from '../../utils/apis/registrationApi'
export default {
  name: 'OperationLog',
  data() {
    return {
      time: [],
      total: 0,
      pageNum: 1,
      pageSize: 20,
      tableData: [],
      filterElements: [
        {
          key: 'operationTime',
          type: 'DateTimePicker',
          mode: 'datetimerange',
          label: '操作时间',
          value: '',
          width: 500
        }
      ],
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.handerSearch
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ],
      tableColumns: [
        {
          title: '操作人',
          width: 80,
          dataIndex: 'createName'
        },
        {
          title: '操作模块',
          dataIndex: 'module'
        },
        {
          title: '操作内容',
          dataIndex: 'operating',
          width: ''
        },
        {
          title: '操作时间',
          dataIndex: 'creatTime'
        }
      ],
      tableLoading: false
    }
  },
  created() {
    this.search()
  },
  methods: {
    handerSearch(val) {
      console.log(val.operationTime !== undefined && val.operationTime !== null)
      if (val.operationTime !== undefined && val.operationTime !== null) {
        this.time = [...val.operationTime]
      } else {
        this.time = []
      }
      this.search()
    },
    // 重置
    handlerReset() {
      this.$refs.filterForm.reset()
    },
    // 分页
    pageChange(data) {
      this.pageNum = data.current
      this.pageSize = data.pageSize
      this.search()
    },
    // 获取列表
    search() {
      let start = ''
      let end = ''
      this.tableLoading = true
      if (this.time !== null && this.time1 !== '') {
        start = this.time[0]
        end = this.time[1]
      } else {
        start = ''
        end = ''
      }
      const params = {
        startTime: start,
        endTime: end,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      selectList(params).then((res) => {
        if (res.data.code === 200) {
          this.tableLoading = false
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        }
      })
    }
  }
}
</script>

